<!--
 * @Description:
 * @Author: zekit
 * @Date: 2022-01-28 14:04:58
 * @LastEditors: zekit
 * @LastEditTime: 2022-02-25 13:58:02
-->
<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <div class="header-block-row">
        <div class="header-block-col">
          <div class="header-block-col-part">
            <img src="@/assets/homepage/client.png" alt="">
          </div>

          <div class="header-block-col-part">
            <div class="font-title">
              客户端总数量
            </div>
            <div class="font-number">
              {{homeDetail.clientTotal}}
            </div>
          </div>
        </div>
        <div class="header-block-col">
          <div class="header-block-col-part">
            <img src="@/assets/homepage/client_online.png" alt="">
          </div>
          <div class="header-block-col-part">
            <div class="font-title">
              在线终端数
            </div>
            <div class="font-number">
              {{homeDetail.onlineClient}}
            </div>
          </div>
        </div>
        <div class="header-block-col">
          <div class="header-block-col-part">
            <img src="@/assets/homepage/distribute.png" alt="">
          </div>
          <div class="header-block-col-part">
            <div class="font-title">
              正在分发资源内容
            </div>
            <div class="font-number">
              {{homeDetail.onSendMedia}}
            </div>
          </div>
        </div>
        <div class="header-block-col">
          <div class="header-block-col-part">
            <img src="@/assets/homepage/now_distribute.png" alt="">
          </div>
          <div class="header-block-col-part">
            <div class="font-title">
              最近分发的资源数量
            </div>
            <div class="font-number">
              {{homeDetail.weekSendMedia}}
            </div>
          </div>
        </div>
      </div>

      <div class="send-record-table">
        <el-button type="danger" @click="clearSendingFile" class="clear-button" icon="el-icon-delete">清空</el-button>
        <div class="title">
          正在分发的内容
        </div>
        <CommonTable
          class="commonTable"
          ref="sendingTableRef"
          :isShowLoading="false"
          :is-selection="false"
          :is-show-index="true"
          :is-has-opera="false"
          :t-column-data="sendingRecord"
          :remote-api="getList"
          :query-params="homeSearchObj"
          :isShowPageControl="false"
          :is-reserve-select="true"
          onlyUpdateFields="send_rate"
          @changeRow="changeRowMethods"
          operating-width="180px"
        >
          <template slot="send_rate" slot-scope="scope">
            {{scope.row.send_rate}}%
          </template>
        </CommonTable>
      </div>

      <div class="send-record-table">
        <div class="title">
          最近分发的资源（最近的15个资源）
        </div>
        <CommonTable
          class="commonTable"
          ref="recentlyRecordRef"
          :is-selection="false"
          :is-show-index="true"
          :is-has-opera="true"
          :t-column-data="recentlyRecord"
          :remote-api="getList"
          :query-params="searchRecentObj"
          :isShowPageControl="false"
          :is-reserve-select="true"
          @changeRow="changeRowMethods"
          operating-width="180px"
        >
          <template slot="send_rate" slot-scope="scope">
            {{scope.row.send_rate}}%
          </template>

          <template slot="media_type" slot-scope="scope">
            {{scope.row.file_type == '1'? '文件夹': scope.row.media_type}}
          </template>

          <template slot="operate" slot-scope="scope">
            <el-button type="text" @click="sendFile(scope.row)">分发</el-button>
          </template>
        </CommonTable>
      </div>
    </div>

    <!--文件分发选择终端-->
    <TerListDialog
      :show-ter-dialog="showTerDialog"
      ref="terListDialogRef"
      @on-cancel="cancelTerDialog"
      @on-confirm="(msg) => confirmSelectTer(msg, 'media_id')"
    ></TerListDialog>


  </div>
</template>

<script>
import Mixins from "@/views/distribute/mixins/mixins";
import { mapGetters } from 'vuex'
import {target} from "@/utils/config";
import {sendingRecord} from './tableCol/sendingRecord'
import {recentlyRecord} from './tableCol/recentlyRecord'
import * as service from './service'
import {clearSending} from "./service";
import {MessageBox} from "element-ui";
import store from "@/store";
import router from "@/router";

export default {
  name: 'Dashboard',
  mixins: [Mixins],
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  data() {
    return {
      showTerDialog: false,
      searchRecentObj: {
        statusList: [1, 2, 3, 4],
        pageSize: 15
      },
      sendingRecord,
      recentlyRecord,
      users: {},
      homeDetail: {
        clientTotal: '',
        onSendMedia: '',
        onlineClient: '',
        weekSendMedia: ''
      },
      homeSearchObj: {
        statusList: [1, 2],
        pageSize: 200000000
      },
      getList: service.getSendRecord,
      timer: {},
      clickCache: {}
    }
  },
  mounted() {
    // 获取用户信息
    this.users = window.localStorage.getItem(`users-${target}`)
    if(this.users) {
      this.users = JSON.parse(this.users)
    }

    this.getHomeData()
    this.startIntervalGetSending()
    this.getHistorySend()
  },
  methods: {
    clearSendingFile() {
      MessageBox.confirm('是否清空等待发送的文件', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        service.clearSending({}).then(() => {
          this.$refs.sendingTableRef.dataList = []
          this.$message.success('清空成功')
          clearInterval(this.timer)
          this.timer = null
          this.startIntervalGetSending()
        })
      })
    },
    sendFile(row) {
      this.clickCache = Object.assign({}, row)
      this.showTerDialog = true
    },
    getHistorySend() {
      const parmas = {
        ...this.searchRecentObj
      }
      this.$refs.recentlyRecordRef.queryData(parmas)
    },
    startIntervalGetSending() {
      const parmas = {
        ...this.homeSearchObj
      }
      this.$refs.sendingTableRef.queryData(parmas)
      this.timer = setInterval(() => {
        this.$refs.sendingTableRef.queryData(parmas)
      }, 5000)
    },
    changeRowMethods() {

    },
    getHomeData() {
      const params = {}
      service.getHomePageData(params).then((res) => {
        Object.keys(this.homeDetail).forEach((fields) => {
          this.homeDetail[fields] = res.data[fields]
        })
      })
    }
  },
  destroyed() {
    clearInterval(this.timer)
    this.timer = {}
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container{
  width: 100%;
  height: calc(100% - 80px);
  overflow: auto;
}
.header-block-row{
  display: flex;
  justify-content: space-between;
  .header-block-col {
  display: flex;
    width: 23%;
    padding: 24px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 1);
    .header-block-col-part{
      padding: 0 10px;

      img{
        width: 60px;
        align-items: center;
        justify-items: center;
      }
    }
  }
}
.font-title {
  font-weight: 300;
}
.font-number {
  font-size: 28px;
  letter-spacing: 0px;
  line-height: 32px;
  color: rgba(58, 63, 99, 1);
  margin-top: 15px;
}
.dashboard {
  width: 100%;
  //height: calc(100% - 80px);
  overflow: hidden;
  //&-container {
  //  margin: 30px;
  //}
  //&-text {
  //  font-size: 30px;
  //  line-height: 46px;
  //}
}
.dashboard-text{
  //text-align: center;
  //padding-top: 60px;
}
  .bg-image{
    width: 100%;
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 0;
  }
  .company-producer{
    position: absolute;
    z-index: 101;
    width: 80%;
    left: 10px;
    top: 20px;
    text-align: center;

    .logo-image{
      width: 100%;
    }
    .company-producer-text{
      color: #333;
      line-height: 2.33333;
      font-size: 14px;
      margin-top: 32px;
    }
  }

  .send-record-table{
    margin-top: 25px;
    max-height: 680px;
    //overflow: auto;
    padding: 15px 25px;
    background: white;
    border-radius: 6px;
    position: relative;
    .title {
      margin-bottom: 25px;
      font-size: 16px;
      font-weight: 500;
      color: rgba(19, 21, 35, 1);
      margin-top: 15px;
    }
    .commonTable{
      //height: 280px;
      margin: 0 auto;
    }
  }

  .clear-button{
    position: absolute;
    right: 20px;
    top: 20px;
  }
</style>
